<template>
  <div>
    <div class="nav">
      <span>说明：目前支持学科和关键字条件筛选</span>
      <el-button class="success" type="success" @click="toNew"
        ><i class="el-icon-edit"></i>新增试题</el-button
      >
    </div>
    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :model="formLabelAlign"
    >
      <el-form-item label="学科">
        <el-select v-model="value1" placeholder="请选择" style="width: 100%">
          <el-option
            v-for="item in options4"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级目录">
        <el-select v-model="value2" placeholder="请选择" style="width: 100%">
        </el-select>
      </el-form-item>
      <el-form-item label="标签">
        <el-select v-model="value3" placeholder="请选择" style="width: 100%">
        </el-select>
      </el-form-item>
      <el-form-item label="关键字">
        <el-input v-model="formLabelAlign.name"></el-input>
      </el-form-item>

      <el-form-item label="试题类型">
        <el-select v-model="value4" placeholder="请选择" style="width: 100%">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="难度">
        <el-select v-model="value5" placeholder="请选择" style="width: 100%">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向">
        <el-select v-model="value6" placeholder="请选择" style="width: 100%">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="录入人">
        <el-select v-model="value7" placeholder="请选择" style="width: 100%">
          <el-option
            v-for="item in options5"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题目备注">
        <el-input v-model="formLabelAlign.type"></el-input>
      </el-form-item>
      <el-form-item label="企业简称">
        <el-input v-model="formLabelAlign.type"></el-input>
      </el-form-item>
      <el-form-item label="城市" class="city">
        <el-select v-model="value8" placeholder="请选择" style="width: 50%" @change="open(value8)">
          <el-option
            v-for="item in city"
            :key="item.city"
            :label="item.city"
            :value="item.city"
          >
          </el-option>
        </el-select>
        <el-select v-model="value9" placeholder="请选择" style="width: 50%">
           <el-option
            v-for="item in area"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <div class="btn">
        <el-button>取消</el-button>
        <el-button type="primary" @click="search">搜索</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
import { datas } from '@/api/hmmm/citys.js'
export default {
  name: 'Navbar',
  data () {
    return {
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      city: '',
      area: '',
      options1: [{
        value: '选项1',
        label: '单选'
      }, {
        value: '选项2',
        label: '多选'
      }, {
        value: '选项3',
        label: '简答'
      }],
      options2: [{
        value: '选项1',
        label: '简单'
      }, {
        value: '选项2',
        label: '一般'
      }, {
        value: '选项3',
        label: '困难'
      }],
      options3: [{
        value: '选项1',
        label: 'o2o'
      }, {
        value: '选项2',
        label: '外包服务'
      }, {
        value: '选项3',
        label: '企业服务'
      }, {
        value: '选项4',
        label: '互联网金融'
      }, {
        value: '选项5',
        label: '企业咨询'
      }, {
        value: '选项6',
        label: '互联网'
      }, {
        value: '选项7',
        label: '电子商务'
      }, {
        value: '选项8',
        label: '其他'
      }],
      options4: [],
      options5: [{
        value: '选项1',
        label: '超级管理员'
      }, {
        value: '选项2',
        label: 'dome'
      }],
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '',
      value6: '',
      value7: '',
      value8: '',
      value9: ''
    }
  },
  async created () {
    const { data } = await simple()
    this.options4 = data
    this.city = datas
  },
  methods: {
    search () {
      this.$emit('search')
    },
    toNew () {
      this.$emit('toNew')
    },
    open (value) {
      this.area = this.city.filter(item => item.city === value)[0].area
    }
  }
}
</script>

<style scoped lang='less'>
.nav {
  height: 30px;
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  span {
    font-size: 12px;
    color: pink;
  }
  .success {
    height: 30px;
  }
}
.el-form {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 400px;
  }
  .btn {
    height: 30px;
    margin-left: 290px;
  }
  .city {
    .el-select {
      display: inline-block;
      width: 150px;
    }
  }
}
</style>
